<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Three.js MMDLoader app Post processing Ripple</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #fff;
				color: #000;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				color: #000;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				display:block;
			}
			#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
		</style>
	</head>

	<body>
		<script id="vertexShader" type="x-shader/x-vertex">
			varying vec2 vUv;

			void main() {
				vUv = uv;
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
			}
		</script>

		<script id="fragmentShader" type="x-shader/x-fragment">
			varying vec2 vUv;

			uniform vec2 size;
			uniform float time;

			const int maxNum = 10;

			uniform int num;
			uniform float times[ maxNum ];
			uniform float coordX[ maxNum ];
			uniform float coordY[ maxNum ];

			uniform sampler2D tDiffuse;

			float wave( vec2 center, float inputTime ) {

				float distance = length( vUv - center );
				return ( pow( ( sin( time * 10.0 + distance * 50.0 ) + 1.0 ) / 2.0, 4.0 ) * 2.0 - 0.0 ) * 2.0 / pow( ( distance * 2.0 ), 2.0 ) / pow( ( max( time - inputTime, 1.0 ) ), 2.0 );

			}

			void main() {

				vec2 unit = 1.0 / size;
				vec2 offset = vec2( 0.0 );

				for ( int i = 0; i < maxNum; i ++ ) {

					if ( i >= num ) break;

					offset += wave( vec2( coordX[ i ], coordY[ i ] ), times[ i ] );

				}

				gl_FragColor = texture2D( tDiffuse, vUv + offset * unit );
			}
		</script>

		<div id="info">
		<a href="http://threejs.org" target="_blank">three.js</a> - MMDLoader app Post processing Ripple<br />
		<a href="https://github.com/takahirox/MMDLoader-app#readme" target="_blank">MMD Assets license</a><br />
		Copyright
		<a href="http://threejs.org" target="_blank">three.js</a>
		<a href="http://www.geocities.jp/higuchuu4/index_e.htm" target="_blank">Model Data</a>
		<a href="http://www.nicovideo.jp/watch/sm13147122" target="_blank">Dance Data</a><br />
		<a href="http://www.nicovideo.jp/watch/sm19168559" target="_blank">Original Camera Data(I've customized this)</a><br /><br />
		Click in the window
		</div>

		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/build/three.js"></script>

		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/libs/mmdparser.min.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/libs/ammo.js"></script>

		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/loaders/TGALoader.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/loaders/MMDLoader.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/effects/OutlineEffect.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/animation/CCDIKSolver.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/animation/MMDPhysics.js"></script>

		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/postprocessing/EffectComposer.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/postprocessing/ShaderPass.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/shaders/CopyShader.js"></script>

		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/Detector.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/libs/dat.gui.min.js"></script>

		<script>

			var container;

			var mesh, camera, scene, renderer, effect;
			var helper;
			var shaderPass, composer;

			var ready = false;

			var clock = new THREE.Clock();

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );

				// scene

				scene = new THREE.Scene();

				scene.add( new THREE.PolarGridHelper( 30, 10 ) );

				var ambient = new THREE.AmbientLight( 0x444444 );
				scene.add( ambient );

				var directionalLight = new THREE.DirectionalLight( 0x666666 );
				directionalLight.position.set( -1, 1, 1 ).normalize();
				scene.add( directionalLight );

				//

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setClearColor( new THREE.Color( 0xffffff ) );
				container.appendChild( renderer.domElement );

				effect = new THREE.OutlineEffect( renderer );

				var copyShader = new THREE.ShaderPass( THREE.CopyShader );
				copyShader.renderToScreen = true;

				shaderPass = new THREE.ShaderPass(
					{
						uniforms: {
							size: { value: new THREE.Vector2( window.innerWidth, window.innerHeight ) },
							time: { value: 0 },
							tDiffuse: { value: null },
							coordX: { value: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] },
							coordY: { value: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] },
							times: { value: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] },
							num: { value: 0 }
						},
						vertexShader: document.getElementById( 'vertexShader' ).textContent,
						fragmentShader: document.getElementById( 'fragmentShader' ).textContent
					}
				);
				shaderPass.renderToScreen = true;

				composer = new THREE.EffectComposer( renderer );
				composer.setSize( window.innerWidth, window.innerHeight );
				composer.addPass( shaderPass );

				// model

				var onProgress = function ( xhr ) {
					if ( xhr.lengthComputable ) {
						var percentComplete = xhr.loaded / xhr.total * 100;
						console.log( Math.round(percentComplete, 2) + '% downloaded' );
					}
				};

				var onError = function ( xhr ) {
				};

				// see the license https://github.com/takahirox/MMDLoader-app#readme for these assets
				var modelFile = 'https://rawcdn.githack.com/mrdoob/three.js/r87/examples/models/mmd/miku/miku_v2.pmd';
				var vmdFiles = [ 'https://rawcdn.githack.com/mrdoob/three.js/r87/examples/models/mmd/vmds/wavefile_v2.vmd' ];
				var cameraFiles = [ 'https://rawcdn.githack.com/mrdoob/three.js/r87/examples/models/mmd/vmds/wavefile_camera.vmd' ];

				helper = new THREE.MMDHelper();

				var loader = new THREE.MMDLoader();

				loader.load( modelFile, vmdFiles, function ( object ) {

					mesh = object;

					helper.add( mesh );
					helper.setAnimation( mesh );
					helper.setPhysics( mesh );

					loader.loadVmds( cameraFiles, function ( vmd ) {

						helper.setCamera( camera );

						loader.pourVmdIntoCamera( camera, vmd );
						helper.setCameraAnimation( camera );

						/*
						 * Note: call this method after you set all animations
						 *       including camera and audio.
						 */
						helper.unifyAnimationDuration( {afterglow: 2.0 } );

						scene.add( mesh );

						ready = true;

					}, onProgress, onError );

				}, onProgress, onError );

				//

				window.addEventListener( 'click', onWindowClick, false );
				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				effect.setSize( window.innerWidth, window.innerHeight );
				composer.setSize( window.innerWidth, window.innerHeight );
				shaderPass.material.uniforms.size.value.set( window.innerWidth, window.innerHeight );

			}

			function onWindowClick( e ) {

				addRipple( e.clientX / window.innerWidth, 1.0 - e.clientY / window.innerHeight );

			}

			function addRipple( x, y ) {

				var uniforms = shaderPass.material.uniforms;

				var currentTime = uniforms.time.value;

				var num = uniforms.num.value;
				var times = uniforms.times.value;
				var coordX = uniforms.coordX.value;
				var coordY = uniforms.coordY.value;

				if ( num >= 10 ) {

					for ( var i = 1; i < 10; i ++ ) {

						times[ i - 1 ] = times[ i ];
						coordX[ i - 1 ] = coordX[ i ];
						coordY[ i - 1 ] = coordY[ i ];

					}

					num --;

				}

				uniforms.times.value[ num ] = currentTime;
				uniforms.coordX.value[ num ] = x;
				uniforms.coordY.value[ num ] = y;
				uniforms.num.value = num + 1;

			}

			function updateRipples() {

				var uniforms = shaderPass.material.uniforms;

				var currentTime = uniforms.time.value;

				var num = uniforms.num.value;
				var times = uniforms.times.value;
				var coordX = uniforms.coordX.value;
				var coordY = uniforms.coordY.value;

				var n = 0;

				for ( var i = 0; i < num; i ++ ) {

					var time = times[ i ];

					if ( currentTime - time >= 10 ) {

						n ++;

					} else {

						break;

					}

				}

				if ( n > 0 ) {

					for ( var i = n; i < num; i ++ ) {

						times[ i - n ] = times[ i ];
						coordX[ i - n ] = coordX[ i ];
						coordY[ i - n ] = coordY[ i ];

					}

					num -= n;

					uniforms.num.value = num;

				}

			}

			//

			function animate() {

				requestAnimationFrame( animate );
				render();

			}

			function render() {

				if ( ready ) {

					var delta = clock.getDelta();

					helper.animate( delta );
					shaderPass.material.uniforms.time.value += delta;

					updateRipples();

				}

				effect.render( scene, camera, composer.readBuffer );
				composer.render();

			}

		</script>

	</body>
</html>
